<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>头部导航栏布局</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/home.css" />
  </head>

  <body>
    <!-- 项目的最外层 -->
    <div class="outer">
      <!-- 头部 -->
      <header class="header">
        <!-- 头部的第一行 -->
        <div class="top">
          <div class="container">
            <div class="loginList">
              <p>尚品汇欢迎您！</p>
              <p>
                <span>请</span>
                <a href="###">登录</a>
                <a href="###" class="register">免费注册</a>
              </p>
            </div>
            <div class="typeList">
              <a href="###">我的订单</a>
              <a href="###">我的购物车</a>
              <a href="###">我的尚品汇</a>
              <a href="###">尚品汇会员</a>
              <a href="###">企业采购</a>
              <a href="###">关注尚品汇</a>
              <a href="###">合作招商</a>
              <a href="###">商家后台</a>
            </div>
          </div>
        </div>
        <!--头部第二行 搜索区域-->
        <div class="bottom">
          <h1 class="logoArea">
            <a class="logo" title="尚品汇" href="###" target="_blank">
              <img src="./images/logo.png" alt="" />
            </a>
          </h1>
          <div class="searchArea">
            <form action="###" class="searchForm">
              <input
                type="text"
                id="autocomplete"
                class="input-error input-xxlarge"
              />
              <button class="sui-btn btn-xlarge btn-danger" type="button">
                搜索
              </button>
            </form>
          </div>
        </div>
      </header>

      <!-- 商品分类导航 -->
      <div class="type-nav">
        <div class="container">
          <h2 class="all">全部商品分类</h2>
          <nav class="nav">
            <a href="###">服装城</a>
            <a href="###">美妆馆</a>
            <a href="###">尚品汇超市</a>
            <a href="###">全球购</a>
            <a href="###">闪购</a>
            <a href="###">团购</a>
            <a href="###">有趣</a>
            <a href="###">秒杀</a>
          </nav>
          <div class="sort">
            <div class="all-sort-list2">
              <div class="item bo">
                <h3>
                  <a href="">图书、音像、数字商品</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">家用电器</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书1</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>经管励志</dt>
                      <dd>
                        <em>
                          <a href="">经济</a>
                        </em>
                        <em>
                          <a href="">金融与投资</a>
                        </em>
                        <em>
                          <a href="">管理</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>生活</dt>
                      <dd>
                        <em>
                          <a href="">家庭与育儿</a>
                        </em>
                        <em>
                          <a href="">旅游/地图</a>
                        </em>
                        <em>
                          <a href="">烹饪/美食</a>
                        </em>
                        <em>
                          <a href="">时尚/美妆</a>
                        </em>
                        <em>
                          <a href="">家居</a>
                        </em>
                        <em>
                          <a href="">婚恋与两性</a>
                        </em>
                        <em>
                          <a href="">娱乐/休闲</a>
                        </em>
                        <em>
                          <a href="">健身与保健</a>
                        </em>
                        <em>
                          <a href="">动漫/幽默</a>
                        </em>
                        <em>
                          <a href="">体育/运动</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>科技</dt>
                      <dd>
                        <em>
                          <a href="">科普</a>
                        </em>
                        <em>
                          <a href="">IT</a>
                        </em>
                        <em>
                          <a href="">建筑</a>
                        </em>
                        <em>
                          <a href="">医学</a>
                        </em>
                        <em>
                          <a href="">工业技术</a>
                        </em>
                        <em>
                          <a href="">电子/通信</a>
                        </em>
                        <em>
                          <a href="">农林</a>
                        </em>
                        <em>
                          <a href="">科学与自然</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>少儿</dt>
                      <dd>
                        <em>
                          <a href="">少儿</a>
                        </em>
                        <em>
                          <a href="">0-2岁</a>
                        </em>
                        <em>
                          <a href="">3-6岁</a>
                        </em>
                        <em>
                          <a href="">7-10岁</a>
                        </em>
                        <em>
                          <a href="">11-14岁</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">手机、数码、充值</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">充值</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="recharge.html">充值</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">电子书2</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">电脑、办公</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书3</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>经管励志</dt>
                      <dd>
                        <em>
                          <a href="">经济</a>
                        </em>
                        <em>
                          <a href="">金融与投资</a>
                        </em>
                        <em>
                          <a href="">管理</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>生活</dt>
                      <dd>
                        <em>
                          <a href="">家庭与育儿</a>
                        </em>
                        <em>
                          <a href="">旅游/地图</a>
                        </em>
                        <em>
                          <a href="">烹饪/美食</a>
                        </em>
                        <em>
                          <a href="">时尚/美妆</a>
                        </em>
                        <em>
                          <a href="">家居</a>
                        </em>
                        <em>
                          <a href="">婚恋与两性</a>
                        </em>
                        <em>
                          <a href="">娱乐/休闲</a>
                        </em>
                        <em>
                          <a href="">健身与保健</a>
                        </em>
                        <em>
                          <a href="">动漫/幽默</a>
                        </em>
                        <em>
                          <a href="">体育/运动</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>科技</dt>
                      <dd>
                        <em>
                          <a href="">科普</a>
                        </em>
                        <em>
                          <a href="">IT</a>
                        </em>
                        <em>
                          <a href="">建筑</a>
                        </em>
                        <em>
                          <a href="">医学</a>
                        </em>
                        <em>
                          <a href="">工业技术</a>
                        </em>
                        <em>
                          <a href="">电子/通信</a>
                        </em>
                        <em>
                          <a href="">农林</a>
                        </em>
                        <em>
                          <a href="">科学与自然</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>少儿</dt>
                      <dd>
                        <em>
                          <a href="">少儿</a>
                        </em>
                        <em>
                          <a href="">0-2岁</a>
                        </em>
                        <em>
                          <a href="">3-6岁</a>
                        </em>
                        <em>
                          <a href="">7-10岁</a>
                        </em>
                        <em>
                          <a href="">11-14岁</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>教育</dt>
                      <dd>
                        <em>
                          <a href="">教材教辅</a>
                        </em>
                        <em>
                          <a href="">考试</a>
                        </em>
                        <em>
                          <a href="">外语学习</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>其它</dt>
                      <dd>
                        <em>
                          <a href="">英文原版书</a>
                        </em>
                        <em>
                          <a href="">港台图书</a>
                        </em>
                        <em>
                          <a href="">工具书</a>
                        </em>
                        <em>
                          <a href="">套装书</a>
                        </em>
                        <em>
                          <a href="">杂志/期刊</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">家居、家具、家装、厨具</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书4</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>经管励志</dt>
                      <dd>
                        <em>
                          <a href="">经济</a>
                        </em>
                        <em>
                          <a href="">金融与投资</a>
                        </em>
                        <em>
                          <a href="">管理</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>生活</dt>
                      <dd>
                        <em>
                          <a href="">家庭与育儿</a>
                        </em>
                        <em>
                          <a href="">旅游/地图</a>
                        </em>
                        <em>
                          <a href="">烹饪/美食</a>
                        </em>
                        <em>
                          <a href="">时尚/美妆</a>
                        </em>
                        <em>
                          <a href="">家居</a>
                        </em>
                        <em>
                          <a href="">婚恋与两性</a>
                        </em>
                        <em>
                          <a href="">娱乐/休闲</a>
                        </em>
                        <em>
                          <a href="">健身与保健</a>
                        </em>
                        <em>
                          <a href="">动漫/幽默</a>
                        </em>
                        <em>
                          <a href="">体育/运动</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>科技</dt>
                      <dd>
                        <em>
                          <a href="">科普</a>
                        </em>
                        <em>
                          <a href="">IT</a>
                        </em>
                        <em>
                          <a href="">建筑</a>
                        </em>
                        <em>
                          <a href="">医学</a>
                        </em>
                        <em>
                          <a href="">工业技术</a>
                        </em>
                        <em>
                          <a href="">电子/通信</a>
                        </em>
                        <em>
                          <a href="">农林</a>
                        </em>
                        <em>
                          <a href="">科学与自然</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>少儿</dt>
                      <dd>
                        <em>
                          <a href="">少儿</a>
                        </em>
                        <em>
                          <a href="">0-2岁</a>
                        </em>
                        <em>
                          <a href="">3-6岁</a>
                        </em>
                        <em>
                          <a href="">7-10岁</a>
                        </em>
                        <em>
                          <a href="">11-14岁</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">服饰内衣</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书5</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>经管励志</dt>
                      <dd>
                        <em>
                          <a href="">经济</a>
                        </em>
                        <em>
                          <a href="">金融与投资</a>
                        </em>
                        <em>
                          <a href="">管理</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>生活</dt>
                      <dd>
                        <em>
                          <a href="">家庭与育儿</a>
                        </em>
                        <em>
                          <a href="">旅游/地图</a>
                        </em>
                        <em>
                          <a href="">烹饪/美食</a>
                        </em>
                        <em>
                          <a href="">时尚/美妆</a>
                        </em>
                        <em>
                          <a href="">家居</a>
                        </em>
                        <em>
                          <a href="">婚恋与两性</a>
                        </em>
                        <em>
                          <a href="">娱乐/休闲</a>
                        </em>
                        <em>
                          <a href="">健身与保健</a>
                        </em>
                        <em>
                          <a href="">动漫/幽默</a>
                        </em>
                        <em>
                          <a href="">体育/运动</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>科技</dt>
                      <dd>
                        <em>
                          <a href="">科普</a>
                        </em>
                        <em>
                          <a href="">IT</a>
                        </em>
                        <em>
                          <a href="">建筑</a>
                        </em>
                        <em>
                          <a href="">医学</a>
                        </em>
                        <em>
                          <a href="">工业技术</a>
                        </em>
                        <em>
                          <a href="">电子/通信</a>
                        </em>
                        <em>
                          <a href="">农林</a>
                        </em>
                        <em>
                          <a href="">科学与自然</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">个护化妆</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书6</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>经管励志</dt>
                      <dd>
                        <em>
                          <a href="">经济</a>
                        </em>
                        <em>
                          <a href="">金融与投资</a>
                        </em>
                        <em>
                          <a href="">管理</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>生活</dt>
                      <dd>
                        <em>
                          <a href="">家庭与育儿</a>
                        </em>
                        <em>
                          <a href="">旅游/地图</a>
                        </em>
                        <em>
                          <a href="">烹饪/美食</a>
                        </em>
                        <em>
                          <a href="">时尚/美妆</a>
                        </em>
                        <em>
                          <a href="">家居</a>
                        </em>
                        <em>
                          <a href="">婚恋与两性</a>
                        </em>
                        <em>
                          <a href="">娱乐/休闲</a>
                        </em>
                        <em>
                          <a href="">健身与保健</a>
                        </em>
                        <em>
                          <a href="">动漫/幽默</a>
                        </em>
                        <em>
                          <a href="">体育/运动</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>科技</dt>
                      <dd>
                        <em>
                          <a href="">科普</a>
                        </em>
                        <em>
                          <a href="">IT</a>
                        </em>
                        <em>
                          <a href="">建筑</a>
                        </em>
                        <em>
                          <a href="">医学</a>
                        </em>
                        <em>
                          <a href="">工业技术</a>
                        </em>
                        <em>
                          <a href="">电子/通信</a>
                        </em>
                        <em>
                          <a href="">农林</a>
                        </em>
                        <em>
                          <a href="">科学与自然</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>少儿</dt>
                      <dd>
                        <em>
                          <a href="">少儿</a>
                        </em>
                        <em>
                          <a href="">0-2岁</a>
                        </em>
                        <em>
                          <a href="">3-6岁</a>
                        </em>
                        <em>
                          <a href="">7-10岁</a>
                        </em>
                        <em>
                          <a href="">11-14岁</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>教育</dt>
                      <dd>
                        <em>
                          <a href="">教材教辅</a>
                        </em>
                        <em>
                          <a href="">考试</a>
                        </em>
                        <em>
                          <a href="">外语学习</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>其它</dt>
                      <dd>
                        <em>
                          <a href="">英文原版书</a>
                        </em>
                        <em>
                          <a href="">港台图书</a>
                        </em>
                        <em>
                          <a href="">工具书</a>
                        </em>
                        <em>
                          <a href="">套装书</a>
                        </em>
                        <em>
                          <a href="">杂志/期刊</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">运动健康</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书7</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">汽车用品</a>
                </h3>
                <div class="item-list clearfix">
                  <div class="subitem">
                    <dl class="fore">
                      <dt>
                        <a href="">电子书8</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">免费</a>
                        </em>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                        <em>
                          <a href="">婚恋/两性</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">经管</a>
                        </em>
                        <em>
                          <a href="">畅读VIP</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">数字音乐</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">通俗流行</a>
                        </em>
                        <em>
                          <a href="">古典音乐</a>
                        </em>
                        <em>
                          <a href="">摇滚说唱</a>
                        </em>
                        <em>
                          <a href="">爵士蓝调</a>
                        </em>
                        <em>
                          <a href="">乡村民谣</a>
                        </em>
                        <em>
                          <a href="">有声读物</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>
                        <a href="">音像</a>
                      </dt>
                      <dd>
                        <em>
                          <a href="">音乐</a>
                        </em>
                        <em>
                          <a href="">影视</a>
                        </em>
                        <em>
                          <a href="">教育音像</a>
                        </em>
                        <em>
                          <a href="">游戏</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>文艺</dt>
                      <dd>
                        <em>
                          <a href="">小说</a>
                        </em>
                        <em>
                          <a href="">文学</a>
                        </em>
                        <em>
                          <a href="">青春文学</a>
                        </em>
                        <em>
                          <a href="">传记</a>
                        </em>
                        <em>
                          <a href="">艺术</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>人文社科</dt>
                      <dd>
                        <em>
                          <a href="">历史</a>
                        </em>
                        <em>
                          <a href="">心理学</a>
                        </em>
                        <em>
                          <a href="">政治/军事</a>
                        </em>
                        <em>
                          <a href="">国学/古籍</a>
                        </em>
                        <em>
                          <a href="">哲学/宗教</a>
                        </em>
                        <em>
                          <a href="">社会科学</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>经管励志</dt>
                      <dd>
                        <em>
                          <a href="">经济</a>
                        </em>
                        <em>
                          <a href="">金融与投资</a>
                        </em>
                        <em>
                          <a href="">管理</a>
                        </em>
                        <em>
                          <a href="">励志与成功</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>生活</dt>
                      <dd>
                        <em>
                          <a href="">家庭与育儿</a>
                        </em>
                        <em>
                          <a href="">旅游/地图</a>
                        </em>
                        <em>
                          <a href="">烹饪/美食</a>
                        </em>
                        <em>
                          <a href="">时尚/美妆</a>
                        </em>
                        <em>
                          <a href="">家居</a>
                        </em>
                        <em>
                          <a href="">婚恋与两性</a>
                        </em>
                        <em>
                          <a href="">娱乐/休闲</a>
                        </em>
                        <em>
                          <a href="">健身与保健</a>
                        </em>
                        <em>
                          <a href="">动漫/幽默</a>
                        </em>
                        <em>
                          <a href="">体育/运动</a>
                        </em>
                      </dd>
                    </dl>
                    <dl class="fore">
                      <dt>科技</dt>
                      <dd>
                        <em>
                          <a href="">科普</a>
                        </em>
                        <em>
                          <a href="">IT</a>
                        </em>
                        <em>
                          <a href="">建筑</a>
                        </em>
                        <em>
                          <a href="">医学</a>
                        </em>
                        <em>
                          <a href="">工业技术</a>
                        </em>
                        <em>
                          <a href="">电子/通信</a>
                        </em>
                        <em>
                          <a href="">农林</a>
                        </em>
                        <em>
                          <a href="">科学与自然</a>
                        </em>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
              <div class="item">
                <h3>
                  <a href="">彩票、旅行</a>
                </h3>
              </div>
              <div class="item">
                <h3>
                  <a href="">理财、众筹</a>
                </h3>
              </div>
              <div class="item">
                <h3>
                  <a href="">母婴、玩具</a>
                </h3>
              </div>
              <div class="item">
                <h3>
                  <a href="">箱包</a>
                </h3>
              </div>
              <div class="item">
                <h3>
                  <a href="">运动户外</a>
                </h3>
              </div>
              <div class="item">
                <h3>
                  <a href="">箱包</a>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--列表-->
      <div class="list-container">
        <div class="sortList clearfix">
          <div class="center">
            <!--banner轮播-->
            <div class="swiper-container" id="mySwiper">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="./images/home/banner1.jpg" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/home/banner2.jpg" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/home/banner3.jpg" />
                </div>
                <div class="swiper-slide">
                  <img src="./images/home/banner4.jpg" />
                </div>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>

              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </div>
          </div>
          <div class="right">
            <div class="news">
              <h4>
                <em class="fl">尚品汇快报</em>
                <span class="fr tip">更多 ></span>
              </h4>
              <div class="clearix"></div>
              <ul class="news-list unstyled">
                <li>
                  <span class="bold">[特惠]</span>备战开学季 全民半价购数码
                </li>
                <li>
                  <span class="bold">[公告]</span>备战开学季 全民半价购数码
                </li>
                <li>
                  <span class="bold">[特惠]</span>备战开学季 全民半价购数码
                </li>
                <li>
                  <span class="bold">[公告]</span>备战开学季 全民半价购数码
                </li>
                <li>
                  <span class="bold">[特惠]</span>备战开学季 全民半价购数码
                </li>
              </ul>
            </div>
            <ul class="lifeservices">
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">话费</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">机票</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">电影票</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">游戏</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">彩票</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">加油站</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">酒店</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">火车票</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">众筹</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">理财</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">礼品卡</span>
              </li>
              <li class="life-item">
                <i class="list-item"></i>
                <span class="service-intro">白条</span>
              </li>
            </ul>
            <div class="ads">
              <img src="./images/home/ad1.png" />
            </div>
          </div>
        </div>
      </div>

      <!--今日推荐-->
      <div class="today-recommend">
        <div class="py-container">
          <ul class="recommend">
            <li class="clock">
              <div class="time">
                <img src="./images/home/clock.png" />
                <h3>今日推荐</h3>
              </div>
            </li>
            <li class="banner">
              <img src="./images/home/today01.png" />
            </li>
            <li class="banner">
              <img src="./images/home/today02.png" />
            </li>
            <li class="banner">
              <img src="./images/home/today03.png" />
            </li>
            <li class="banner">
              <img src="./images/home/today04.png" />
            </li>
          </ul>
        </div>
      </div>

      <!-- 商品排行 -->
      <div class="rank">
        <div class="tab">
          <div class="tab-tit clearfix">
            <a href="javascript:;" class="on">
              <p class="img">
                <i></i>
              </p>
              <p class="text">热卖排行</p>
            </a>
            <a href="javascript:;">
              <p class="img">
                <i></i>
              </p>
              <p class="text">特价排行</p>
            </a>
            <a href="javascript:;">
              <p class="img">
                <i></i>
              </p>
              <p class="text">新品排行</p>
            </a>
          </div>
        </div>
        <div class="content">
          <ul>
            <li>
              <div class="img-item">
                <p class="tab-pic">
                  <a href="#">
                    <img src="./images/home/1.jpg" />
                  </a>
                </p>
                <div class="tab-info">
                  <div class="info-title">
                    <a href="#"
                      >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                      移动联通电信4G手机</a
                    >
                  </div>
                  <p class="info-price">定金：¥100.00</p>
                </div>
              </div>
              <div class="img-item">
                <p class="tab-pic">
                  <a href="#">
                    <img src="./images/home/1.jpg" />
                  </a>
                </p>
                <div class="tab-info">
                  <div class="info-title">
                    <a href="#"
                      >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                      移动联通电信4G手机</a
                    >
                  </div>
                  <p class="info-price">定金：¥100.00</p>
                </div>
              </div>
              <div class="img-item">
                <p class="tab-pic">
                  <a href="#">
                    <img src="./images/home/1.jpg" />
                  </a>
                </p>
                <div class="tab-info">
                  <div class="info-title">
                    <a href="#"
                      >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                      移动联通电信4G手机</a
                    >
                  </div>
                  <p class="info-price">定金：¥100.00</p>
                </div>
              </div>
              <div class="img-item">
                <p class="tab-pic">
                  <a href="#">
                    <img src="./images/home/1.jpg" />
                  </a>
                </p>
                <div class="tab-info">
                  <div class="info-title">
                    <a href="#"
                      >【官网价直降1100】Apple iPhone 8 Plus 256GB 银色
                      移动联通电信4G手机</a
                    >
                  </div>
                  <p class="info-price">定金：¥100.00</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- 猜你喜欢 -->
      <div class="like">
        <div class="py-container">
          <div class="title">
            <h3 class="fl">猜你喜欢</h3>
            <a href="javascript:;" class="fr tip changeBnt">换一换</a>
          </div>
          <div class="bd">
            <ul class="favourate">
              <li>
                <img src="./images/home/like_02.png" alt="" />
                <div class="like-text">
                  <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                  <h3>¥116.00</h3>
                </div>
              </li>
              <li>
                <img src="./images/home/like_03.png" alt="" />
                <div class="like-text">
                  <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                  <h3>¥116.00</h3>
                </div>
              </li>
              <li>
                <img src="./images/home/like_01.png" alt="" />
                <div class="like-text">
                  <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                  <h3>¥116.00</h3>
                </div>
              </li>
              <li>
                <img src="./images/home/like_02.png" alt="" />
                <div class="like-text">
                  <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                  <h3>¥116.00</h3>
                </div>
              </li>
              <li>
                <img src="./images/home/like_03.png" alt="" />
                <div class="like-text">
                  <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                  <h3>¥116.00</h3>
                </div>
              </li>
              <li>
                <img src="./images/home/like_01.png" alt="" />
                <div class="like-text">
                  <p>阳光美包新款单肩包女包时尚子母包四件套女</p>
                  <h3>¥116.00</h3>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!--楼层-->
      <div class="floor">
        <div class="py-container">
          <div class="title clearfix">
            <h3 class="fl">家用电器</h3>
            <div class="fr">
              <ul class="nav-tabs clearfix">
                <li class="active">
                  <a href="#tab1" data-toggle="tab">热门</a>
                </li>
                <li>
                  <a href="#tab2" data-toggle="tab">大家电</a>
                </li>
                <li>
                  <a href="#tab3" data-toggle="tab">生活电器</a>
                </li>
                <li>
                  <a href="#tab4" data-toggle="tab">厨房电器</a>
                </li>
                <li>
                  <a href="#tab5" data-toggle="tab">应季电器</a>
                </li>
                <li>
                  <a href="#tab6" data-toggle="tab">空气/净水</a>
                </li>
                <li>
                  <a href="#tab7" data-toggle="tab">高端电器</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="tab-content">
            <div class="tab-pane">
              <div class="floor-1">
                <div class="blockgary">
                  <ul class="jd-list">
                    <li>节能补贴</li>
                    <li>4K电视</li>
                    <li>空气净化器</li>
                    <li>IH电饭煲</li>
                    <li>滚筒洗衣机</li>
                    <li>电热水器</li>
                  </ul>
                  <img src="./images/home/floor-1-1.png" />
                </div>
                <div class="floorBanner">
                  <div class="swiper-container" id="floor1Swiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="./images/home/floor-1-b01.png" />
                      </div>
                      <div class="swiper-slide">
                        <img src="./images/home/floor-1-b02.png" />
                      </div>
                      <div class="swiper-slide">
                        <img src="./images/home/floor-1-b03.png" />
                      </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                  </div>
                </div>
                <div class="split">
                  <span class="floor-x-line"></span>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-2.png" />
                  </div>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-3.png" />
                  </div>
                </div>
                <div class="split center">
                  <img src="./images/home/floor-1-4.png" />
                </div>
                <div class="split">
                  <span class="floor-x-line"></span>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-5.png" />
                  </div>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-6.png" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--楼层-->
      <div class="floor">
        <div class="py-container">
          <div class="title clearfix">
            <h3 class="fl">家用电器</h3>
            <div class="fr">
              <ul class="nav-tabs clearfix">
                <li class="active">
                  <a href="#tab1" data-toggle="tab">热门</a>
                </li>
                <li>
                  <a href="#tab2" data-toggle="tab">大家电</a>
                </li>
                <li>
                  <a href="#tab3" data-toggle="tab">生活电器</a>
                </li>
                <li>
                  <a href="#tab4" data-toggle="tab">厨房电器</a>
                </li>
                <li>
                  <a href="#tab5" data-toggle="tab">应季电器</a>
                </li>
                <li>
                  <a href="#tab6" data-toggle="tab">空气/净水</a>
                </li>
                <li>
                  <a href="#tab7" data-toggle="tab">高端电器</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="tab-content">
            <div class="tab-pane">
              <div class="floor-1">
                <div class="blockgary">
                  <ul class="jd-list">
                    <li>节能补贴</li>
                    <li>4K电视</li>
                    <li>空气净化器</li>
                    <li>IH电饭煲</li>
                    <li>滚筒洗衣机</li>
                    <li>电热水器</li>
                  </ul>
                  <img src="./images/home/floor-1-1.png" />
                </div>
                <div class="floorBanner">
                  <div class="swiper-container" id="floor2Swiper">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img src="./images/home/floor-1-b01.png" />
                      </div>
                      <div class="swiper-slide">
                        <img src="./images/home/floor-1-b02.png" />
                      </div>
                      <div class="swiper-slide">
                        <img src="./images/home/floor-1-b03.png" />
                      </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                  </div>
                </div>
                <div class="split">
                  <span class="floor-x-line"></span>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-2.png" />
                  </div>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-3.png" />
                  </div>
                </div>
                <div class="split center">
                  <img src="./images/home/floor-1-4.png" />
                </div>
                <div class="split">
                  <span class="floor-x-line"></span>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-5.png" />
                  </div>
                  <div class="floor-conver-pit">
                    <img src="./images/home/floor-1-6.png" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--商标-->
      <div class="brand">
        <div class="py-container">
          <ul class="brand-list">
            <li class="brand-item">
              <img src="./images/home/brand_21.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_03.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_05.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_07.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_09.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_11.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_13.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_15.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_17.png" />
            </li>
            <li class="brand-item">
              <img src="./images/home/brand_19.png" />
            </li>
          </ul>
        </div>
      </div>

      <!-- 底部 -->
      <div class="footer">
        <div class="footer-container">
          <div class="footerList">
            <div class="footerItem">
              <h4>购物指南</h4>
              <ul class="footerItemCon">
                <li>购物流程</li>
                <li>会员介绍</li>
                <li>生活旅行/团购</li>
                <li>常见问题</li>
                <li>购物指南</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>配送方式</h4>
              <ul class="footerItemCon">
                <li>上门自提</li>
                <li>211限时达</li>
                <li>配送服务查询</li>
                <li>配送费收取标准</li>
                <li>海外配送</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>支付方式</h4>
              <ul class="footerItemCon">
                <li>货到付款</li>
                <li>在线支付</li>
                <li>分期付款</li>
                <li>邮局汇款</li>
                <li>公司转账</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>售后服务</h4>
              <ul class="footerItemCon">
                <li>售后政策</li>
                <li>价格保护</li>
                <li>退款说明</li>
                <li>返修/退换货</li>
                <li>取消订单</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>特色服务</h4>
              <ul class="footerItemCon">
                <li>夺宝岛</li>
                <li>DIY装机</li>
                <li>延保服务</li>
                <li>尚品汇E卡</li>
                <li>尚品汇通信</li>
              </ul>
            </div>
            <div class="footerItem">
              <h4>帮助中心</h4>
              <img src="./images/wx_cz.jpg" />
            </div>
          </div>
          <div class="copyright">
            <ul class="helpLink">
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                联系我们
                <span class="space"></span>
              </li>
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                商家入驻
                <span class="space"></span>
              </li>
              <li>
                营销中心
                <span class="space"></span>
              </li>
              <li>
                友情链接
                <span class="space"></span>
              </li>
              <li>
                关于我们
                <span class="space"></span>
              </li>
              <li>
                营销中心
                <span class="space"></span>
              </li>
              <li>
                友情链接
                <span class="space"></span>
              </li>
              <li>关于我们</li>
            </ul>
            <p>地址：北京市昌平区宏福科技园综合楼6层</p>
            <p>京ICP备19006430号</p>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/swiper.min.js"></script>
    <script>
      var mySwiper = new Swiper("#mySwiper", {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

      var floor1Swiper = new Swiper("#floor1Swiper", {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

      var floor2Swiper = new Swiper("#floor2Swiper", {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
        },

        // 如果需要前进后退按钮
        navigation: { 
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>
